<%@ page pageEncoding='UTF-8'%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<s:set var="contextPath" value="#request.get('javax.servlet.forward.context_path')" scope="request" />
<!DOCTYPE html>
<head>
    <title>Doctor Home</title>
    <%-- header --%>
    <jsp:include page="/WEB-INF/content/common/Header.jsp" flush="true"/>
    <script src="${contextPath}/js/doctor/doctor.js"></script>
</head>
<body class="metro home">
	<%-- tob-bar --%>
    <jsp:include page="/WEB-INF/content/common/TopBar.jsp" flush="true"/>
       	
	<div id="main-container" class="body-wrapper">
        <%-- tob-container --%>
    	<jsp:include page="/WEB-INF/content/common/TopContainer.jsp" flush="true"/>
        
    	<div id="body-container">
        	<div id="doctor-home-container" class="home-container tile-area">
                        
            	<div class="tile-group three">                
	        		<!-- prescription registration -->
	        		<a class="tile bg-darkGreen" href="${contextPath}/prescription/registration">
	        			<div class="tile-content icon">
							<i class="icon-file-3"></i>
						</div>
						<div class="tile-status">
							<span class="name">Prescription</span>
						</div>
	        		</a>
                    
                    <a class="tile double bg-green live" data-role="live-tile" data-effect="slideUp" data-click="transform">
                    	<!-- first alert -->
                    	<s:if test="%{existGuiDrugStockList}">
                    		<s:iterator var="oStock" value="%{guiDrugStockList}">
		                        <div class = "tile-content email appointment" >
		                        	<div class="email-image appointment-patient-gender">	
		                                <h1 class="no-margin fg-white" style="padding:5px 0 0 10px;">
		                                    <span class="icon-warning"></span>
		                                </h1>
		                                <div class="email-data-subtitle bg-red text-center" style="border-radius: 5px; padding: 5px 5px; margin-top: 5px; font-weight:bold;">${oStock.daysLeft * -1} <small>days</small></div>
		                        	</div>
		                            <div class="email-data appointment-data">
		                                <span class="email-data-title appointment-patient-name">
		                                    ${oStock.drug.name}
		                                </span>
		                                <span class="email-data-subtitle appointment-time">Brand : ${oStock.drug.brand.name}</span>
		                                <span class="email-data-text appointment-info">Amount : ${oStock.amount}</span>
		                                <span class="email-data-text appointment-info">Exp.Date : ${oStock.expireDateString}</span>
		                            </div>
	                        </div> 
	                        </s:iterator>
                    	</s:if>
                    	<s:else>
                    		<div class="tile-content email appointment" >
	                        	<div class="email-image appointment-patient-gender">	
	                                <h1 class="no-margin fg-white" style="padding:5px 0 0 10px;">
	                                    <span class="icon-thumbs-up"></span>
	                                </h1>
	                        	</div>
	                            <div class="email-data appointment-data">
	                                <span class="email-data-title appointment-patient-name">
	                                    All Drug Stocks in good condition.
	                                </span>
	                            </div>
                        	</div>
                    	</s:else>
                    </a>
                                
                    <!-- today appointments -->
					<div class = "tile-content">
						<a href="${contextPath}/appointment/list" class="tile double double-vertical live" data-role="live-tile" data-effect="slideUp" data-click="transform">                        
                            <!-- today's appointment -->
                            <s:if test="%{existGuiAppointmentList}">
	                            <s:iterator var="oAppointment" value="%{guiAppointmentList}">
		                            <div class = "tile-content email appointment" style="background:url('${contextPath}/img/tile/bg/appointment.jpg')">
		                                <div class="email-image appointment-patient-gender">
		                                    <s:if test="%{#oAppointment.patient.male}">
			          							<img class="list-icon bg-lightBlue" src="${contextPath}/img/icon/Man-128.png"/>
			         						</s:if>
			         						<s:elseif test="%{#oAppointment.patient.female}">
			          							<img class="list-icon bg-lightPink" src="${contextPath}/img/icon/Woman-128.png"/>
			         						</s:elseif>
		                                </div>
		                                <div class="email-data appointment-data fg-darkGreen">
		                                    <span class="email-data-title appointment-patient-name">
		                                        ${oAppointment.patient.name}
		                                    </span>
		                                    <span class="email-data-subtitle appointment-time">${oAppointment.time} PM</span>
		                                    <span class="email-data-text appointment-info">${oAppointment.patient.age} years old</span>
		                                </div>
		                            </div>
	                            </s:iterator>
                            </s:if>
                            <s:else>
                            	<h2 class="text-center">No Appointments</h2>
                            </s:else>
                            <!-- today's appointment count and icon -->
                            <div class = "brand ">
                                <div class="label">
                                    <h3 class="no-margin fg-darkGreen">
                                        <span class="icon-calendar"></span>
                                    </h3>
                                </div>
                                <s:if test="existGuiAppointmentList">
                                	<div class="badge fg-darkGreen subheader"><s:property value="%{guiAppointmentList.size()}"/></div>
                                </s:if>
                                <s:else>
                                	<div class="badge fg-darkGreen"><s:property value="0"/></div>
                                </s:else>
                            </div>
	                    </a>
                    </div>
                    
                    <!-- drug stock -->
                    <a class="tile bg-lime" href="${contextPath}/drugstock/list" data-click="transform">
                    	<div class = "tile-content icon icon-large" >
                        	<img src="${contextPath}/img/icon/white/First-Aid-Kit-01-256.png">
                        </div>
                        <div class="tile-status">
							<span class="name">Drug Stock</span>
						</div>
                    </a>                        
                    
                    <!-- report -->
                    <a class="tile bg-emerald" href="${contextPath}/report/show" data-click="transform">
                    	<div class = "tile-content icon" >
                        	<img src="${contextPath}/img/tile/reports.png">
                        </div>
                        <div class="tile-status">
							<span class="name">Reports</span>
						</div>
                    </a>                 
             	</div>
                
                <!-- new-registration -->
                <div class="tile-group one">
                	<div class="tile-group-title fg-black">Registration</div>
                    <a class="tile half bg-lime" data-click="transform" href="${contextPath}/drug/registration">
                    	<div class = "tile-content icon " >
                        	<img src="${contextPath}/img/icon/white/Medicine-drug.png">
                        </div>
                    </a>                   
                    <a class="tile half bg-green" data-click="transform" href="${contextPath}/drugbrand/registration">
                    	<div class = "tile-content icon " >
                        	<img src="${contextPath}/img/icon/white/Medicine-128.png">
                        </div>
                    </a>
                    <a class="tile half bg-darkGreen" data-click="transform" href="${contextPath}/doctor/registration">
                    	<div class = "tile-content icon " >
                        	<img src="${contextPath}/img/icon/white/Doctor-128.png">
                        </div>
                    </a>
                    <a class="tile half bg-lime" data-click="transform" href="${contextPath}/assistant/registration">
                        <div class = "tile-content icon ">
                        	<img src="${contextPath}/img/icon/white/Doctor-Nurse-128.png">
                        </div>
                    </a>
                    <a class="tile bg-darkGreen" data-click="transform" href="${contextPath}/patient/registration">
                        <div class = "tile-content icon-large" >
                        	<img src="${contextPath}/img/icon/white/Wheelchair-128.png">
                        </div>
                    </a>                   
                </div>
                
                <!-- list -->
                <div class="tile-group one">
                	<div class="tile-group-title fg-black">Collection</div>
                    <a class="tile bg-green" data-click="transform" href="${contextPath}/patient/list">
                    	<div class = "tile-content icon-large" >
                        	<img src="${contextPath}/img/icon/white/Wheelchair-128.png">
                        </div>
                    </a>
                    <a class="tile half bg-darkGreen" data-click="transform" href="${contextPath}/doctor/list">
                    	<div class = "tile-content icon" >
                        	<img src="${contextPath}/img/icon/white/Doctor-128.png">
                        </div>
                    </a>
                    <a class="tile half bg-lime" data-click="transform" href="${contextPath}/assistant/list">
                    	<div class = "tile-content icon" >
                        	<img src="${contextPath}/img/icon/white/Doctor-Nurse-128.png">
                        </div>
                    </a>
                    <a class="tile half bg-lime" data-click="transform" href="${contextPath}/drug/list">
                    	<div class = "tile-content icon " >
                        	<img src="${contextPath}/img/icon/white/Medicine-drug.png">
                        </div>
                    </a> 
                    <a class="tile half bg-lime" data-click="transform" href="${contextPath}/drugbrand/list">
                    	<div class = "tile-content icon" >
                        	<img src="${contextPath}/img/icon/white/Medicine-128.png">
                        </div>
                    </a>                     
                </div>	
                       
            </div>       
    	</div>
              
        <%-- bottom-container --%>
    	<jsp:include page="/WEB-INF/content/common/BottomContainer.jsp" flush="true"/>
        
	</div>
    
    <%-- footer-container --%>
    <jsp:include page="/WEB-INF/content/common/FooterContainer.jsp" flush="true"/>
    
</body>
</html>
